<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:comp="http://java.sun.com/jsf/composite/register"
>
<h:head>
	<title>JSF 2.0 Hello World</title>
</h:head>
<ui:composition template="/templates/layout.xhtml">
	<ui:define name="content">
	
		<p:growl id="messages" showDetail="true" />
	
		<p:panel header="Users">
			<h:form id="form">

				<p:toolbar>  
					<p:toolbarGroup align="left">
				    	<p:commandButton value="Add a new user" icon="ui-icon-document" oncomplete="addUserDialog.show()" />  
					</p:toolbarGroup>  
				</p:toolbar> 
					
				<p:contextMenu for="users">
					<p:menuitem value="View" update=":view:viewUserPanel" icon="ui-icon-search" oncomplete="viewUserDialog.show()" />
					<p:menuitem value="Edit" update=":edit:editUserPanel" icon="ui-icon-search" oncomplete="editUserDialog.show()" />
					<p:menuitem value="Delete" update=":form:users" icon="ui-icon-close" actionListener="#{usersController.deleteUser}" />
				</p:contextMenu>

				<p:dataTable value="#{usersController.users}" var="user" id="users" selectionMode="single" 
					selection="#{usersController.selectedUser}" rowKey="#{user.id}">
	
					<p:column>
						<f:facet name="header">Username</f:facet>
						<h:outputText value="#{user.username}"/>
					</p:column>
	
					<f:facet name="footer"></f:facet>
	
				</p:dataTable> 
			</h:form>
			
		</p:panel>
		
		<h:form id="view">
			<p:dialog header="User detail" showEffect="fade" widgetVar="viewUserDialog" modal="true" styleClass="center">
				<p:outputPanel id="viewUserPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty usersController.selectedUser}">
						<h:outputLabel for="username" value="Username: " />
						<h:outputText id="username" value="#{usersController.selectedUser.username}"/>
					</h:panelGrid>
					<p:commandButton value="Close" icon="ui-icon-cancel" oncomplete="viewUserDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		
		<h:form id="edit">
			<p:dialog header="Edit user" showEffect="fade" widgetVar="editUserDialog" modal="true" styleClass="center">
				<p:outputPanel id="editUserPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty usersController.selectedUser}">
								              
						<h:outputLabel for="username" value="Username: " />
						<p:inputText id="username" value="#{usersController.selectedUser.username}" required="true"/>
						
						<h:outputLabel for="password" value="Password: " />
						<p:password id="password" value="#{usersController.selectedUser.password}" required="true"/>
						
						<h:outputLabel for="password_2" value="Confirm password: " />
						<p:password id="password_2" value="#{usersController.selectedUser.confirmPassword}" required="true"/>
						
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:users" icon="ui-icon-disk" actionListener="#{usersController.updateUser}" 
						oncomplete="editUserDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="editUserDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		
		<h:form id="add">
			<p:dialog header="Add user" showEffect="fade" widgetVar="addUserDialog" modal="true" styleClass="center">
				<p:outputPanel id="addUserPanel">
					<h:panelGrid columns="2" cellpadding="5">
					
						<h:outputLabel for="username" value="Username: " />
						<p:inputText id="username" value="#{usersController.user.username}" required="true"/>
						
						<h:outputLabel for="password" value="Password: " />
						<p:password id="password" value="#{usersController.user.password}" required="true"/>
						
						<h:outputLabel for="password_2" value="Confirm password: " />
						<p:password id="password_2" value="#{usersController.user.confirmPassword}" required="true"/>
						  
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:users" icon="ui-icon-disk" actionListener="#{usersController.saveUser}"
						oncomplete="addUserDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="addUserDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		
	</ui:define>
</ui:composition>
</html>
